<template>
    <div>
        <div class="table-title">
            <h3>论文查询</h3>
        </div>
        <div class="user-show">
            <div class="user-table">
                <div class="user-table-utils">
                    <div>
                        <el-input placeholder="请输入查询内容" v-model="searchContent" class="input-with-select">
                            <el-select v-model="searchItem" slot="prepend" placeholder="请选择查询项">
                                <el-option v-for="item in searchItems" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
                        </el-input>
                    </div>
                </div>
                <el-table :data="tableData" border style="width: 100%" v-loading="tableLoading">
                    <el-table-column prop="thesisId" label="论文编号">
                    </el-table-column>
                    <el-table-column prop="name" label="论文课题">
                    </el-table-column>
                    <el-table-column prop="author" label="著作人">
                    </el-table-column>
                    <el-table-column prop="thesis" label="论文">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" :content="scope.row.filename" placement="top">
                                <el-button type="text" @click="downloadThesis(scope.row.filename)">{{ scope.row.thesis ?
                                    "下载论文" : "" }}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="press" label="出版社">
                    </el-table-column>
                    <el-table-column prop="teacher" label="导师">
                    </el-table-column>
                    <el-table-column prop="time" label="发行时间">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="更新时间">
                    </el-table-column>
                </el-table>
                <div class="user-pagination">
                    <el-pagination background small layout="prev, pager, next" :total="pagination.total"
                        :page-size="pagination.pageSize" :current-page="pagination.current"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import apis from '@/utils/api';
import request from '@/utils/requestMethod';
import './style.less';
import { Message } from 'element-ui';
import axios from 'axios';

export default {
    name: "thesisList",
    mounted() {
        this.fetchThesis();
    },
    data() {
        return {
            tableLoading: false,
            tableData: [],
            searchItem: "",
            searchItems: [
                {
                    label: "全部",
                    value: "all"
                },
                {
                    label: "论文编号",
                    value: "thesisId"
                },
                {
                    label: "论文课题",
                    value: "name"
                },
                {
                    label: "著作人",
                    value: "author"
                },
                {
                    label: "出版社",
                    value: "press"
                }
            ],
            searchContent: "",
            pagination: {
                current: 1,
                pageSize: 10,
                total: 0
            },
        };
    },
    methods: {
        /**
         *  获取所有论文信息
         */
        fetchThesis() {
            this.tableLoading = true;
            const { pagination: { current, pageSize } } = this;
            request(apis.fetchThesisInfo + `?pageSize=${pageSize}&current=${current}`).then(res => {
                const { objects, total } = res.data;
                this.pagination.total = total;
                this.tableData = objects;
            }).finally(() => {
                this.tableLoading = false;
            }).catch(() => {
                this.tableLoading = false;
            });
        },
        /**
         * 处理表格删除事件
         */
        handleDel(row) {
            this.delLoading = true;
            request(apis.delThesis, {
                method: "POST",
                body: row
            }).then(res => {
                const { objects, message } = res.data;
                if (objects) {
                    Message.success(message);
                }
            }).finally(() => {
                this.delLoading = false;
                this.fetchThesis();
            }).catch(() => {
                Message.error("删除失败");
                this.delLoading = false;
            });
        },
        /**
         * 处理翻页事件
         */
        handleCurrentChange(value) {
            this.pagination.current = value;
            this.fetchThesis();
        },
        handleClose(done) {
            done();
        },
        /**
         *  处理搜索事件
         */
        handleSearch() {
            const { searchItem, pagination: { current, pageSize } } = this;
            if (searchItem === "all") {
                this.fetchThesis();
                this.searchContent = "";
                this.searchItem = "";
                this.ifSearch = false;
            }
            else if (searchItem === "author") {
                const userInfo = JSON.parse(localStorage.getItem("userInfo"));
                this.searchContent = userInfo.id;
            }
            else {
                if (searchItem === "") {
                    Message.warning("请输入搜索项");
                }
                if (this.searchContent === "") {
                    Message.warning("请输入搜索内容");
                }
            }
            if (this.searchContent !== "" && searchItem !== "" && searchItem !== "all") {
                let content = this.searchContent;
                const body = {
                    searchItem,
                    content,
                    current,
                    pageSize
                };
                this.tableLoading = true;
                request(apis.searchThesis, {
                    method: "POST",
                    body
                }).then(res => {
                    const { objects, message, total } = res.data;
                    this.pagination.total = total;
                    this.tableData = objects;
                    Message.success(message);
                }).finally(() => {
                    this.tableLoading = false;
                }).catch(() => {
                    this.tableLoading = false;
                    Message.error("搜索失败");
                });
            }
        },
        downloadThesis(value) {
            console.log(value);
            axios({
                method: 'GET',
                url: '/api' + apis.downloadThesis,
                params: {filename: value},
                responseType: 'blob'
            }).then(response => {
                // 创建一个 blob 对象，并创建 URL 对象
                const blob = new Blob([response.data]);
                const url = window.URL.createObjectURL(blob);
                // 创建 a 标签并设置下载链接并模拟点击
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', value);
                document.body.appendChild(link);
                link.click();
                // 删除临时对象
                URL.revokeObjectURL(url);
                document.body.removeChild(link);
            }).catch(() => {
                this.$message.error('下载失败，请重试！')
            });
        }
    }
}
</script>